<template>
  <div class="Download">
    <el-container>
      <el-main>
        <div class="btnBox">
          <div class="btnBox-top">
            <h3>币圈资讯</h3>
            <h3>一首掌握</h3>
          </div>
          <el-card class="box-card">
            <div class="box-card-left">
              <el-button type="primary" round style="width: 210px;height: 40px;">iOS下载</el-button>
              <br />
              <br />
              <el-button type="primary" round style="width: 210px;height: 40px;">Android下载</el-button>
            </div>
            <div class="box-card-right">
              <img src="../assets/image/2vm.jpg" alt />
            </div>
          </el-card>
        </div>
      </el-main>
      <!-- 底部公共部分 -->
      <el-footer>
        <div class="footer">
          <div class="footer-link">
            <a
              target="_blank"
              href="https://home.bihu.com"
              rel="nofollow me noopener noreferrer"
            >关于我们</a>
            <a target="_blank" href="/ContactUs">联系我们</a>
            <a
              target="_blank"
              href="https://home.bihu.com/agreement/HelpCenter.html"
              rel="nofollow me noopener noreferrer"
            >帮助中心</a>
            <a
              target="_blank"
              href="https://home.bihu.com/agreement/index.html"
              rel="nofollow me noopener noreferrer"
            >用户协议</a>
          </div>
          <div class="footer-record">
            <p class="record">
              ©2020 - BIHU.COM All Rights Reserved
              <span>
                无锡巽雷信息科技有限公司&nbsp;
                <a
                  target="_blank"
                  href="http://www.beian.miit.gov.cn/"
                >苏ICP备20006983号-8</a>&nbsp;
              </span>
            </p>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<style scoped>
.el-main {
  position: relative;
  width: 100%;
  height: 542px;
  background-image: url(../assets/image/background_img.jpg);
  background-position: 50% -127px;
  background-size: 100% auto;
}
.footer {
  width: 100%;
  text-align: center;
  color: #5a6169;
}
.footer .footer-link {
  margin-top: 20px;
}
.footer .footer-link a {
  color: #5a6169;
  padding: 0 40px;
}

.footer .footer-record .record {
  text-align: center;
  font-size: 13px;
  margin-top: 18px;
  padding-bottom: 17px;
  color: #5a6169;
}
.footer .footer-record .record span {
  display: block;
  margin-top: 10px;
  color: #5a6169;
}
.footer .footer-record .record a {
  font-size: 11px;
  color: #5a6169;
}
.btnBox {
  width: 470px;
  height: 268px;
  margin-top: 190px;
  margin-left: 222px;
}
.btnBox .btnBox-top h3 {
  float: left;
  font-size: 36px;
  color: #666;
  font-weight: 500;
  margin: 10px 25px;
}
.btnBox .btnBox-top {
  margin-left: 35px;
}
.btnBox .el-card {
  width: 470px;
  height: 200px;
  background-color: #f8f8fa;
  border-radius: 10px;
}
.btnBox .box-card-left .el-button {
  background-color: #007bff;
}
.btnBox .box-card-left {
  margin-top: 30px;
  margin-left: 15px;
}
.btnBox .box-card-right img {
  width: 140px;
  height: 140px;
}
.btnBox div {
  float: left;
}
.btnBox .box-card-right {
  margin-left: 40px;
  margin-top: 10px;
}
</style>
